<template>
  <div>
    <div class="navMenu">
      <label v-for="(navMenu,index) in navMenus" :key="index">
        <el-menu-item
          v-if="!navMenu.children"
          :index="navMenu.url"
          :class="select == navMenu.id && name!='map'? 'select' : 'el-menu-item'"
          @click="indexSelect(navMenu)"
        >
          <!-- <i :class="navMenu.imgUrl"></i> -->
          <i :class="['iconfont',navMenu.imgUrl,'iconfont-size']"></i>
          <span slot="title">{{navMenu.displayName }}</span>
        </el-menu-item>

        <el-submenu
          v-if="navMenu.children&&navMenu.children.length>0"
          :key="index"
          :index="navMenu.url"
        >
          <template slot="title">
            <!-- <i :class="navMenu.imgUrl"></i> -->
            <i :class="['iconfont',navMenu.imgUrl,'iconfont-size']"></i>
            <span>{{navMenu.displayName}}</span>
          </template>
          <div
            style="width:100%"
            :class="navMenu.displayName=='水位站列表'||navMenu.displayName=='积水点列表'?'aside':''"
          >
            <nav-menu :navMenus="navMenu.children" :index="navMenu.url"></nav-menu>
          </div>
        </el-submenu>
      </label>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "NavMenu", //使用递归组件必须要有
  props: ["navMenus"], // 传入子组件的数据
  data() {
    return {
      select: ""
    };
  },
  methods: {
    indexSelect(point) {
      // console.log(point);

      this.select = point.id;
      this.name = point.name;
    },
    name() {}
  }
};
</script>
 
<style scoped lang="less">
.el-menu-item:hover {
  /* color: #6db6ff; */
  /* color: rgba(102, 156, 249, 0.4); */
  background-color: rgba(102, 156, 249, 0.4);
}
.select {
  background-color: rgba(102, 156, 249, 0.4);
}
.iconfont-size {
  font-size: 26px;
  margin-right: 12px;
  color: rgba(102, 156, 249, 0.8);
}
.aside {
  height: 300px;
  overflow: scroll;
  overflow-x: hidden;
}
/* .el-menu-item {
  color: #6db6ff;
} */
/* .menuLeft .el-menu-item.is-active {
  background: #6db6ff !important;
}
.menuLeft .el-submenu__title.is-active {
  background: #6db6ff !important;
} */
</style>